<template>
  <div class="remark-editor">
    <div class="text-wrap">
      <!-- <template v-if="textarea && (textarea.includes('<p') || textarea.includes('<img') || textarea.includes('<video'))"> -->
      <template v-if="textarea">
        <el-popover placement="bottom-end" popper-class="action-more" :width="500" teleported trigger="hover">
          <template #reference>
            <div class="remark-info" style="display: flex">
              <div
                v-if="_textarea && _textarea !== '<p><br></p>'"
                class="text-over"
                style="max-width: 125px"
                v-html="_textarea"
              ></div>
              <span v-else>-</span>
              <p style="color: #3d3d3d" v-if="textarea ? textarea.includes('<img') : false">[图片]</p>
              <p style="color: #3d3d3d" v-if="textarea ? textarea.includes('<video') : false">[视频]</p>
            </div>
          </template>
          <div class="all-info">
            <div class="all-remark-info" v-html="textarea"></div>
          </div>
        </el-popover>
      </template>
      <span v-else>-</span>
      <span @click="visible = true">
        <slot name="edit" :isEdit="isEdit">
          <el-button type="primary" link v-show="isEdit" :icon="Edit">编辑</el-button>
        </slot>
      </span>
    </div>
  </div>
  <el-dialog
    append-to="html"
    v-model="visible"
    :title="title"
    modal-class="audit-dialog"
    width="800"
    align-center
    center
    :show-close="false"
  >
    <div class="remark-content">
      <Editor v-model="textarea" :isLimit="false" />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <div class="mt20">
          <el-button type="info" v-if="showCancel" @click="cancel" style="width: 120px">取消</el-button>
          <el-button type="primary" @click="submit" style="width: 120px">确认</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, ref, watch } from "vue";
import { Edit } from "@element-plus/icons-vue";
import Editor from "@/components/Editor";

const visible = ref(false);

const emit = defineEmits(["update:modelValue", "submit", "cancel"]);
const props = defineProps({
  modelValue: {
    type: String,
    default: ""
  },
  title: {
    type: String,
    default: "修改订单备注"
  },
  isEdit: {
    type: Boolean,
    default: true
  },
  showCancel: {
    type: Boolean,
    default: true
  }
});
const textarea = ref(props.modelValue);
const _textarea = ref("");
watch(
  () => props.modelValue,
  val => {
    textarea.value = JSON.parse(JSON.stringify(val));
    // console.log("备注信息改变了111===", val);
  },
  { deep: true, immediate: true }
);
watch(
  () => textarea.value,
  val => {
    if (val) {
      let _val = val.replace(/<img[^>]*>|<video[^>]*>]/gi, "");
      const pStr = _val.match(/<p([\s\S]*?)<\/p>/g);
      _textarea.value = pStr ? pStr[0] : val;
      // console.log("备注信息改变了222===", pStr);
    }

    emit("update:modelValue", val);
  },
  { deep: true, immediate: true }
);

// const visible = computed({
//   get() {
//     return props.isOpen;
//   },
//   set(value) {
//     emit("update:isOpen", value);
//   }
// });

const submit = () => {
  visible.value = false;
  emit("submit");
};

const cancel = () => {
  visible.value = false;
  emit("cancel");
};
</script>

<style scoped lang="scss">
.title {
  color: #3d3d3d;
  font-size: 20px;
  margin-bottom: 32px;
}
:deep(.all-remark-info) {
  height: 150px;
  overflow: auto;
  img {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    margin: 10px 10px 0 0;
  }
  video {
    width: 100%;
  }
}
.remark-editor {
  display: flex;
}
.text-wrap {
  display: flex;
  align-items: center;
  // width: 100%;
  .remark-info {
    flex: 1;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    :deep(p) {
      // width: 100%;
      width: auto;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .el-button {
    width: 60px;
  }
}

.dialog-footer-flex {
  display: flex;
  justify-content: space-between;
}
</style>
